{{define "title"}}{{if .article.Id}}修改{{else}}发布{{end}}文章 {{end}}
{{define "content"}}
<div class="row">
    <div class="col-md-9 col-sm-6">
        <div class="sep20"></div>
        <ol class="breadcrumb">
            <li><a href="/">首页</a></li>
            <li><a href="/articles">文章</a></li>
            <li class="active">{{if .article.Id}}编辑{{else}}写{{end}}文章</li>
        </ol>
        <div class="page box_white">
        {{if canPublish .me.DauAuth 1}}
            <form class="form-horizontal validate-form" role="form" action="{{if .article.Id}}/articles/modify{{else}}/articles/new{{end}}" data-redirect="/articles{{if .article.Id}}/{{.article.Id}}?r={{timestamp}}{{end}}">
                {{if .article.Id}}
                <input type="hidden" name="id" value="{{.article.Id}}" />
                {{end}}
                <textarea id="txt" name="txt" style="display: none;"></textarea>
                <textarea id="content" name="content" style="display: none;"></textarea>
                <div class="form-group form-group-sm">
                    <label class="col-sm-1 control-label" for="title"><abbr>*</abbr>标题</label>
                    <div class="col-sm-11">
                        <input class="form-control required" type="text" id="title" name="title" placeholder="标题" value="{{.article.Title}}">
                    </div>
                </div>
                <div class="form-group form-group-sm">
                    <label class="col-sm-1 control-label"><abbr>*</abbr>格式</label>
                    <div class="col-sm-11">
                        <label class="radio-inline">
                            <input type="radio" name="markdown" value="1" checked>
                            Markdown
                        </label>
                        {{if not .article.Id}}
                        <label class="radio-inline">
                            <input type="radio" name="markdown" value="0" class="required">
                            富文本编辑
                        </label>
                        {{end}}
                    </div>
                </div>
                <div class="form-group form-group-sm" id="markdown-editor">
                    <label class="col-sm-1 control-label" for="content">正文</label>
                    <div class="col-sm-11">
                        <div class="row clearfix md-toolbar">
                            <ul class="col-md-10 list-inline">
                                <li class="edit cur"><a href="#" tabindex="-1"><i class="glyphicon glyphicon-edit"></i> 编辑</a></li>
                                <li class="preview"><a href="#" title="预览" tabindex="-1"><i class="glyphicon glyphicon-eye-open preview"></i> 预览</a></li>
                                <!-- <li class="wide"><a href="/wide/playground" tabindex="-1" target="_blank" title="通过Wide编辑代码"><i class="glyphicon glyphicon-cloud"></i> Wide</a></li> -->
                            </ul>
                            <div class="col-md-2 text-right">
                                <i id="upload-img" class="glyphicon glyphicon-picture upload-img tool-tip" data-toggle="tooltip" data-placement="top" title="上传图片"></i>
                            </div>
                        </div>
                        <textarea class="form-control need-autogrow main-textarea" id="markdown-content" name="markdown-content" rows="15" tabindex="0">{{.article.Content}}</textarea>
                        <div class="content-preview"></div>
                    </div>
                </div>
                {{if not .article.Id}}
                <textarea id="myeditor" name="ckeditor-content" cols="102" rows="22" style="margin-left: 5px;display: none;"></textarea>
                {{end}}

                {{if .captchaId}}
                <div class="form-group form-group-sm">
                    <label class="col-sm-1 control-label" for="captchaSolution"><abbr>*</abbr>验证码</label>
                    <div class="col-sm-4">
                        <input type="hidden" name="captchaid" value="{{.captchaId}}">
                        <div class="input-group">
                            <input type="text" id="captchaSolution" name="captchaSolution" class="form-control" placeholder="请输入右侧验证码" />
                            <span class="input-group-btn">
                                <img id="reload-captcha" src="/captcha/{{.captchaId}}.png" alt="验证码" title="看不清，点击" />
                            </span>
                        </div>
                    </div>
                </div>
                {{end}}

                <div class="form-group form-group-sm">
                    <label class="col-sm-5 control-label">&nbsp;</label>
                    <div class="col-sm-6">
                        <button type="submit" class="btn btn-success btn-sm" id="submit">{{if .article.Id}}提交修改{{else}}发布文章{{end}}</button> (Ctrl+Enter)
                    </div>
                </div>

                <div class="form-group form-group-sm markdown-preview">
                    <label class="col-sm-1 control-label">预览</label>
                    <div class="col-sm-11">
                        <div id="content-preview" style="border: 1px solid #ccc; padding: 5px; font-size: 13px;"></div>
                    </div>
                </div>
            {{else}}
                <div class="text-center">
                    <div class="sep20"></div>
                    <div>
                        <span class="alert alert-warning">您没有权限发布文章，请通过主题发布帖子</span>
                    </div>
                    <div class="sep20"></div>
                    <div>
                        <a class="btn btn-success btn-sm" href="/topics/new">发布主题</a>
                    </div>
                </div>
                <div class="sep10"></div>
            {{end}}

            </form>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="sep20"></div>

        <div class="box_white sidebar sb-author">
            <div class="top">
                <h3 class="title"><i class="glyphicon glyphicon-list-alt"></i>&nbsp;发布文章说明</h3>
            </div>
            <div class="sb-content">
                <span class="help-block">
                    <ul class="markdown-help">
                        <li>支持 Markdown 格式, <strong>**粗体**</strong>、~~删除线~~、<code>`单行代码`</code></li>
                        <li>http://example.org 自动加链接</li>
                        <li>代码支持高亮，如：```go func main() {}``` 则是Go语法高亮</li>
                        <li><strong>@name</strong> 会链接到用户页面，并会通知他</li>
                        <li>![alt 文本](http://foo.com/bar.jpg) 显示图片</li>
                        <li>:smile: 支持 <strong>emoji 表情</strong>，见<a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji cheat sheet</a></li>
                        <li>完整 Markdwon 语法说明：<a href="http://wowubuntu.com/markdown/" target="_blank">语法说明 (简体中文版)</a></li>
                        <!-- <li>支持嵌入 Wide 的Playground 代码直接运行</li> -->
                    </ul>
                    <ul class="ckeditor-help dn">
                        <li>富文本编辑器使用的是 <a href="http://ckeditor.com" target="_blank">ckeditor</a></li>
                        <li>代码请通过工具栏代码按钮撰写，支持高亮</li>
                        <li>支持截图后直接粘贴上传图片</li>
                    </ul>
                </span>
            </div>
        </div>

    </div>
</div>
{{end}}
{{define "css"}}
{{include "cssjs/prism.css.html" .}}
<style type="text/css">
#cke_myeditor { margin: 0 auto 8px; }
</style>
{{end}}
{{define "js"}}

{{include "cssjs/ckeditor.js.html" .}}
{{include "cssjs/publish.js.html" .}}
{{include "cssjs/prism.js.html" .}}

<script>

var hadInit = false;

function init() {
    if (hadInit) {
        return;
    }

    hadInit = true;

    CKEDITOR.plugins.addExternal('autosave', '/static/ckeditor/plugins/autosave/', 'plugin.js');
    CKEDITOR.plugins.addExternal('prism', '/static/ckeditor/plugins/prism/', 'plugin.js');

    MyEditorConfig.extraPlugins = MyEditorExtraPlugins+',preview,prism,autosave';
    MyEditorConfig.toolbar = [
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'RemoveFormat' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] },
        { name: 'clipboard', items: [ 'Undo', 'Redo' ] },
        { name: 'links', items: [ 'Link', 'Unlink' ] },
        { name: 'insert', items: [ 'CodeSnippet', 'Image' ] },
        { name: 'styles', items: [ 'Format' ] },
        { name: 'document', items: [ 'Source', 'Preview' ] },
        { name: 'tools', items: [ 'Maximize' ] }
    ];
    CKEDITOR.replace( 'myeditor', MyEditorConfig );
}

var isNew = {{.article.Id}} == '';
var isMarkdown = true;

$(function() {
    // 文本框自动伸缩
    $('.need-autogrow').autoGrow();

    function saveArticleComposeDraft() {
        if (!isNew || !isMarkdown) {
            return;
        }

        var title = $('#title').val(),
            content = $('#markdown-content').val();

        var objdata = {title: title, content: content};

        saveComposeDraft(uid, 'article', objdata);
    }

    (function() {
        if (isNew && isMarkdown) {
            var draft = loadComposeDraft(uid, 'article');
            if (draft) {
                $('#title').val(draft.title);
                $('#markdown-content').val(draft.content);
            }

            $('.need-autogrow').autoGrow();
        }
    })();

    $('#title,#markdown-content').on('change', function() {
        saveArticleComposeDraft();
    });

    $('input[type=radio]').on('click', function() {
        if ($(this).val() == 0) {
            isMarkdown = false;

            init();
            $('#cke_myeditor').show();
            $('#markdown-editor').hide();

            $('.markdown-help').hide();
            $('.ckeditor-help').show();

            $('.markdown-preview').hide();
        } else {
            isMarkdown = true;

            $('#cke_myeditor').hide();
            $('#markdown-editor').show();

            $('.markdown-help').show();
            $('.ckeditor-help').hide();

            $('.markdown-preview').show();
        }
    });
});
</script>
<script type="text/javascript" src="{{.static_domain}}/static/dist/js/articles.min.js"></script>
{{end}}
